<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>article</title>
    <style>
        .article_summary {
            color: gray;
        }

        article {
            width: 1000px;
            margin: auto;
        }

        h1,
        h2 {
            text-align: center;
        }

        .default_p {
            font-size: 18px;
            color: red;
        }
    </style>

</head>

<body>
    <article id="article">
        <h2 id="get_title">标题</h2>
        <div>
            <span id="get_date">日期：2021年3月2日</span>
        </div>
        <p class="article_summary" id="get_summary">摘要</p>
    </article>
    <script>
        fetch('test.json')
            .then(res => {
                //console.log(res)
                res.json().then(data => {
                    //console.log(data)
                    render(data)
                })
            }).catch(err => {
                console.log('错误')
            })

        function render(data) {
            document.getElementById('get_title').textContent = data.title
            document.getElementById('get_summary').textContent = data.summary
            document.getElementById('get_title').textContent = data.release_date
            data.content.forEach(element => {
                switch (element.eltype) {
                    case 'p':
                        let pEl = document.createElement('p')
                        if ("marks" in element) {
                            element.marks.forEach(markObj => {
                                let mark = document.createElement(markObj.markType)
                                mark.textContent = markObj.markText
                                Object.assign(mark.style, markObj.markCss)
                                element.value = element.value
                                    .replace(markObj.markText, mark.outerHTML)
                                pEl.innerHTML = element.value
                                document.getElementById('article')
                                    .appendChild(pEl)

                            })
                        } else {
                            pEl.textContent = element.value
                            Object.assign(pEl.style, element.css)
                            document.getElementById('article')
                                .appendChild(pEl)
                        }
                        pEl.className = element.attrs.cssName
                        break
                    case 'img':
                        let imgEl = document.createElement('img')
                        imgEl.src = element.value
                        Object.assign(imgEl.style, element.css)
                        document.getElementById('article')
                            .appendChild(imgEl)
                        break
                    case 'video':
                        let videoEl = document.createElement('video')
                        videoEl.src = element.value
                        let index = 0
                        Object.assign(videoEl.style, element.css)
                        Object.keys(element.attrs).forEach(attrValue => {
                            videoEl.setAttribute(attrValue, Object.values(element.attrs)[index])
                        })
                        document.getElementById('article')
                            .appendChild(videoEl)
                        break
                }
            });
        }
    </script>
</body>

</html>